<!-- 设备状态 -->
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { QueryInfo } from '../../api/index'

const currentEnv = import.meta.env.DEV
const baseURL = window.location.origin
import DetailModal from './DetailModal.vue'
import { ElMessage } from 'element-plus'

const props = defineProps(['faultData', 'feederData', 'statusData', 'alarmData'])

const feederList = ref<any[]>([])
watch(
  () => props.feederData,
  (newVal, oldVal) => {
    feederList.value = newVal
  }
)

const statusList = ref<any[]>([
  {
    Number: '0',
    Name: '离线',
    Qty: '0'
  },
  {
    Number: '1',
    Name: '待机',
    Qty: '0'
  },
  {
    Number: '2',
    Name: '运行',
    Qty: '0'
  },
  {
    Number: '3',
    Name: '故障',
    Qty: '0'
  },
  // {
  //   Number: '4',
  //   Name: '超时',
  //   Qty: '0'
  // }
])
watch(
  () => props.statusData,
  (newVal, oldVal) => {
    statusList.value = newVal
  }
)

const faultList = ref<any[]>([])
watch(
  () => props.faultData,
  (newVal, oldVal) => {
    faultList.value = newVal
  }
)

const alarmList = ref({
  WarningQty: 0,
  AlarmQty: 0
})
watch(
  () => props.alarmData,
  (newVal, oldVal) => {
    alarmList.value = newVal
  }
)

//设备详情弹框
const detailRef = ref()
//点击设备，展示详情
const showDetail = (data: any) => {
  const { FID } = data
  QueryInfo({
    InputStr: `OperType=GetFeederInfo;$;FID=${FID}`,
    JsonStr: []
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
    }
    detailRef.value.open(res.data.FeederInfo[0])
  })
}
</script>
<template>
  <div class="flex justify-between">
    <div class="basis-1/5">
      <!-- 图表 -->
      <div class="fault-count w-full">
        <p class="title">故障统计<span class="unit">单位：次</span></p>
        <!-- 使用进度条 -->
        <div class="progress-box mt-3">
          <template v-for="(item, index) in faultList" :key="index">
            <div v-if="item.Qty <= alarmList.WarningQty" class="progress-item">
              <p>{{ item.Name }}</p>
              <el-progress :stroke-width="14" :percentage="(item.Qty / 30) * 100"
                ><span class="progress-text" text>{{ item.Qty }}</span></el-progress
              >
            </div>
            <div
              v-else-if="alarmList.WarningQty < item.Qty && item.Qty <= alarmList.AlarmQty"
              class="progress-item progress-yellow"
            >
              <p>{{ item.Name }}</p>
              <el-progress :stroke-width="14" :percentage="(item.Qty / 30) * 100"
                ><span class="progress-text" text>{{ item.Qty }}</span></el-progress
              >
            </div>
            <div v-else class="progress-item progress-red">
              <p>{{ item.Name }}</p>
              <el-progress :stroke-width="14" :percentage="(item.Qty / 30) * 100"
                ><span class="progress-text" text>{{ item.Qty }}</span></el-progress
              >
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="basis-4/5 feeder-info">
      <!-- 设备状态 -->
      <div class="device-status flex items-center">
        <p class="title">设备状态</p>
        <div class="flex items-center btn-box ml-16">
          <template v-for="(item, index) in statusList" :key="index">
            <div class="status-box status-1" v-if="item.Number == '0'">
              <p class="flex items-center">
                <span class="mr-1">{{ item.Name }}</span
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
            <div class="status-box status-0" v-if="item.Number == '1'">
              <p class="flex items-center ml-1">
                <span class="mr-1">{{ item.Name }}</span
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
            <div class="status-box status-2" v-if="item.Number == '2'">
              <p class="flex items-center ml-1">
                <span class="mr-1">{{ item.Name }}</span
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
            <div class="status-box status-3" v-if="item.Number == '3'">
              <p class="flex items-center ml-1">
                <span class="mr-1">{{ item.Name }}</span
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
            <!-- <div class="status-box status-4" v-if="item.Number == '4'">
              <p class="flex items-center ml-1">
                <span class="mr-1">{{ item.Name }}</span
                >&nbsp;{{ item.Qty }}
              </p>
            </div> -->
          </template>
        </div>
      </div>
      <!-- IP&站别信息 -->
      <div class="w-full flex flex-row mt-2" style="height: 670px">
        <div class="w-full station-info flex flex-wrap items-center">
          <template v-for="(item, index) in feederList" :key="index">
            <div
              :class="['item', 'mt-3', (index + 1) % 5 === 0 ? 'last-item' : '']"
              @click="showDetail(item)"
            >
              <div class="flex justify-center items-center item-img text-center m-auto">
                <p class="mr-1">{{ item.Name }}</p>
                <img
                  v-if="currentEnv"
                  :src="`/Feeder/Img/${item.Status}.png`"
                  alt="Image"
                />
                <img v-else :src="`${baseURL}/Feeder/Img/${item.Status}.png`" alt="Local Image" />
              </div>
              <div class="mt-3 item-info text-center">
                <p>IP: {{ item.IP }}</p>
                <p class="mb-2">Station: {{ item.Station }}</p>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
  <DetailModal ref="detailRef" />
</template>

<style lang="less" scoped>
@import '../../style/common.less';
@import '../../style/control.less';
</style>
